{% extends "base.html" %}
{% load i18n %}

{% block page_title %}
Pinball - Workflow Instances
{% endblock %}

{% block javascript %}
<script type="text/javascript" charset="utf-8">
    function addJobsLink(nRow, aData, iDataIndex) {
        $('td:eq(0)', nRow).html('<a href="/jobs/?workflow=' +
            aData["workflow"] + '&instance=' + aData["instance"] + '">' +
            aData["instance"] + '</a>');
        if (aData["status"] == "SUCCESS") {
            $('td:eq(1)', nRow).addClass("text-success");
        } else if (aData["status"] == "FAILURE" ||
                   aData["status"] == "ABORTED") {
            $('td:eq(1)', nRow).addClass("text-danger");
        } else if (aData["status"] == "RUNNING") {
            $('td:eq(1)', nRow).addClass("text-info");
        }
        var run_time = aData["run_time"];
        if (run_time === null) {
            run_time = '';
        } else {
            run_time = jintervals(run_time, "{D}d {h}h {m}m {s}s");
        }
        $("td:eq(4)", nRow).html(run_time);
    }

    statusData = {"workflow": "{{ request.GET.workflow }}"};

    init = function() {
        baseInit();
        oTable = $('#instances').dataTable({
            // "sDom": "r<'row'<'span6'l><'span6'>f>t<'row'<'span6'i><'span6'>p>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
                "sLengthMenu": "_MENU_ records per page"
            },
            "bProcessing": true,
            "sAjaxSource":
                "/ajax/instances/?workflow={{ request.GET.workflow }}",
            "fnCreatedRow": addJobsLink,
            "aoColumns": [
                { "mData": "instance" },
                { "mData": "status" },
                { "mData": "start_time" },
                { "mData": "end_time" },
                { "mData": "run_time" }
            ],
            "fnServerData": getTableData,
            "aaSorting": [[ 0, "desc" ]],
            "aLengthMenu": [[10, 25, 50, 100, -1],
                            [10, 25, 50, 100, "All"]],
        });
    };
</script>
{% endblock %}

{% block workflows_active %}
class="active"
{% endblock %}

{% block breadcrumb %}
<ol class="breadcrumb">
  <li></li>
  <li class="active">{{ request.GET.workflow }}</li>
  <li class="dropdown pull-right">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          Action<span class="caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          <li class="description" title="Finish all currently running jobs, don't start new ones">
            <a tabindex="-1" href="#modal-drain" data-toggle="modal">Drain</a>
          </li>
          <li class="description" title="Stop the drain process">
            <a tabindex="-1" href="#modal-undrain" data-toggle="modal">Undrain</a>
          </li>
      </ul>
  </li>
</ol>
{% endblock breadcrumb %}

{% block modal %}
{% include 'modal.html' with modal_id='modal-drain' command='drain' title='Drain' ctx='&workflow='|add:request.GET.workflow description='Drain workflow <b>'|add:request.GET.workflow|add:'</b>'|safe %}
{% include 'modal.html' with modal_id='modal-undrain' command='undrain' title='Undrain' ctx='&workflow='|add:request.GET.workflow description='Undrain workflow <b>'|add:request.GET.workflow|add:'</b>'|safe %}
{% include 'modal.html' with modal_id='modal-abort' command='abort' title='Abort' ctx='&workflow='|add:request.GET.workflow description='Abort workflow <b>'|add:request.GET.workflow|add:'</b>'|safe %}
{% include 'modal.html' with modal_id='modal-unabort' command='unabort' title='Unabort' ctx='&workflow='|add:request.GET.workflow description='Unabort workflow <b>'|add:request.GET.workflow|add:'</b>'|safe %}
{% endblock modal %}

{% block content %}
<div class="row">
  <table cellpadding="0" cellspacing="0" border="0"
         class="table table-striped table-bordered" id="instances">
      <thead><tr>
          <th width="20%">Instance</th>
          <th width="20%">Status</th>
          <th width="20%">Start</th>
          <th width="20%">End</th>
          <th width="20%">Run Time</th>
      </tr></thead>
      <tbody></tbody>
  </table>
</div>
{% endblock %}
